<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>详情页</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
	<meta content="yes" name="apple-mobile-web-app-capable">     
	<meta content="black" name="apple-mobile-web-app-status-bar-style">     
	<meta content="telephone=no" name="format-detection">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css?v=10" />
	<link rel="stylesheet" type="text/css" href="/H5/css/reset.css?v=10" />
	<link rel="stylesheet" type="text/css" href="/H5/css/details.css?v=14" />
	<style>
		.count{max-width:540px;position: fixed; left: 50%; transform:translateX(-50%);width: 100%;height: 265px;z-index: 999999; opacity: 1;bottom:-283px;background-color: #fefefe}
		.c_top{margin-top: -18px;}
		.c_top>span{display: inline-block;width: 70%}
		.c_top>span:first-child{width: 30%;text-align: center}
		.c_top>span:first-child img{width: 60px;height:60px;border-radius: 3px;}
		.c_top>span:nth-child(2) img{width: 23px;height: 23px;float: right;margin-top: -6px;margin-right: 10px;}
		.c_top>div{text-align: right;font-size: .6rem;color:red;padding-right: 10px;}
		.c_top>span>div{font-size: .65rem;color: grey}
		.c_top>span>span{color:#7709a3;}
		.c_middle{padding-left: 15px;}
		.c_middle>div{margin-bottom: 8px;margin-top: 3px;}
		.c_middle>span{display: inline-block;padding: 4px 8px;border-radius: 2px;background-color: #e9e9e9;font-size: .75rem;margin-bottom: 5px;}
		.c_middle>span:not(:first-child){margin-right: 5px;}
		.focus{color:white;background-color:#7709a3!important; }
	</style>
</head>
<body>
	<div class="page-group ms-controller" :controller="detial">
        <div class="page page-current" style="margin: auto;max-width: 540px;">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">{{@data.title.length>10?@data.title.substr(0,10)+"...":@data.title||""}}</h1>
            </header>
            <div class="content visibility">
            	<div class="cover" :on-click="@hide" style="max-width: 540px;width:100%; height: 100%; background-color:#000; opacity: .5; position: fixed; z-index: 99999;display: none"></div>
    			<div class="details">
                	<div class="details_header"><img onerror="$(this).css('display','none')" /><a class="icon icon-cart" style="font-size: 1.3rem; color: rgb(222, 66, 101); position: absolute; top: 2%; right: 5%" href="/H5/order">
                    	</a></div>
                    <div class="details_title">
                    	<div>
                        	<p style="color:#fb6eb5">{{@data.title||""}}</p>
                        	<span>{{@data.intro||""}}</span>
                        </div>
                    </div>
                    <ul class="money">
                    	<li style=" font-size: .75rem; color: rgb(222, 66, 101); width: 100%">
							<span :if="@vip_level==0" style="float: left">团购价:￥{{@data.sell_price||""}}</span>
							<span :if="@vip_level>0" style="float: left">瑞生价:￥{{@data.price_1||""}}</span>
							<span style="float: right; padding-left: .1rem; color:#505050; font-size: .7rem;">销量:{{@data.sell_num||""}}</span>
							<!--<span>瑞生价:￥{{@data.vip_price||""}}</span>-->
						</li>
                    	<li style="float: left; width: auto;" :if="@data.contribution>0"><span style="color:#505050; font-size: .8rem;">贡献值:{{@data.contribution||""}}</span></li>
                    	<li style="width: auto; font-size: .6rem; float: right"><a :on-click="@show(true)">立即购买</a></li>
                    	<li style="width: auto; font-size: .6rem; float: right"><a :on-click="@show(false)" style="background-color:#ffd06a;">加入购物车</a></li>
                    </ul>
                    <p class="details_main_p">商品详情</p>
                    <div class="details_main">
                    </div>
                    <div class="count">
						<div class="c_top">
							<span class="details_small"><img src=""></span><span><span>￥{{@price}}</span><img src="/H5/images/close.png" :on-click="@hide" alt=""><div :if="!@choose">请选择规格</div><div :if="@choose">{{@choose||""}}</div></span>
							<div>库存：256件</div>
						</div>
						<div class="c_middle" :for="(i,el) in @data.spec">
							<div>{{el.name}}</div>
							<span :for="e in el.list" :class="'s'+i+e.id" :on-click="change(e.v,i,e.id)">{{e.v}}</span>
							<!--<span :for="e in el.list" class='uuuu' :on-click="change(e.v,i)">{{e.v}}</span>-->
						</div>
                    	<div style="text-align: center; line-height: 60px;margin-top: 3px;border-top:1px solid #f6f6f6;position: absolute;width: 100%;bottom:0;">
                    		<span :if="typeChoose=='true'">购买数量：</span>
	                    	    <input :on-click="@js($event)" name="p" type="button" value="-" style="width:25px; height: 26px; line-height: 26px; color: #000;background-color: #fff; border: 1px solid #ccc;vertical-align: middle" :if="typeChoose=='true'" />
	                    	    <input name="goodnum" :duplex="@count" :on-blur="@zs($event)" type="text" :if="typeChoose=='true'" style="width:80px; color: #000; font-size: 14px; height: 26px; text-align: center;border: 1px solid #ccc;vertical-align: middle" />
	                    	    <input :on-click="@js($event)" name="m" type="button" value="+" :if="typeChoose=='true'" style="background-color: #fff; line-height: 26px;width:25px; height: 26px; color: #000;border: 1px solid #ccc;vertical-align: middle" />
                    	    <button :if="typeChoose=='false'" :on-click="@addToCart" style="float: right; padding: 0 5px;background-color: #ffa6b5; color: #fff">加入购物车</button>
							<button :if="typeChoose=='true'" :on-click="@buy" style="float: right; padding: 0 5px;background-color: #ffa6b5; color: #fff">立即购买</button>
                    	</div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script>
		var detial = avalon.define({
		    $id: "detial",
		    data: {},
		    count: 1,
			is_vip: 0,
			price:'',
			vip_level: 0,
			choose:'',
			type:[],
			typeChoose:'',
		    param: Mall.parseUrl(window.location.href).id,
		    getDetail: function(){
		    	var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
		    	if( is_weixin ){
				    Mall.request( "/api/GoodsDetail", {goods_id: detial.param} )
				    	.always( function( data ){
				    		if( data.error_code == 0 ){
				    			detial.data = data.data;
								detial.vip_level = data.data.vip_level;
								detial.is_vip = data.data.is_vip;
                                detial.price = detial.data.price_1;
				    			$( ".content" ).removeClass( "visibility" );
				    			$( ".details_header img" ).attr("src", data.data.picture_urls[0]);
                                $( ".details_small img" ).attr("src", data.data.picture_urls[0]);
				    			$( ".details_main" ).append(data.data.detail);
				    			var url =  window.location.href;
				    			var root = 'http://'+location.host;
				    			wx.ready(function(){
								    wx.onMenuShareTimeline({ 
								            title: data.data.title, // 分享标题
								            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								            imgUrl: root+data.data.picture_urls[0], // 分享图标
								    }, function(res) { 
								    });
								    wx.onMenuShareAppMessage({ 
								            title: data.data.title, // 分享标题
								            desc: data.data.intro, // 分享描述
								            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								            imgUrl: root+data.data.picture_urls[0], // 分享图标
								    }, function(res) { 
								        
								    });
								})
				    		}
				    	} )
		    	}
		    	else{
			    	Mall.request( "/api/GoodsDetail", {goods_id: detial.param} )
			    		.always( function( data ){
			    			if( data.error_code == 0 ){
			    				detial.data = data.data;
			    				detial.vip_level = data.data.vip_level;
			    				detial.is_vip = data.data.is_vip;
                                detial.price = detial.data.price_1;
			    				$( ".content" ).removeClass( "visibility" );
			    				$( ".details_header img" ).attr("src", data.data.picture_urls[0]);
                                $( ".details_small img" ).attr("src", data.data.picture_urls[0]);
			    				$( ".details_main" ).append(data.data.detail);
			    			}
			    		} )
		    	}
		    },
			change:function(v,i,id){
		        /*var middle = document.getElementsByClassName('.c_middle');*/
		       /* console.log(document.getElementsByClassName('.c_middle')[i].getE lementsByTagName("span"))
		        for(var a=1;a< document.getElementsByClassName('.c_middle')[i].getElementsByTagName("span").length;a++){
                    middle[i].getElementsByTagName("span")[a].classList.remove('focus');
				}*/
                /*.addClass('focus');*/
               /* console.log($('.s0_0').innerText());*/
		        /*$(this).parent().children().removeClass('focus');
                $(this).addClass('focus');*/
		        for(var a=0;a<detial.data.spec[i].list.length;a++){
                    $('.s'+i+a).removeClass('focus');
				}
                $('.s'+i+id).addClass('focus');
               /* var index = detial.choose.indexOf(detial.data.spec[i].name);
		        if(index>-1){
		            var kIndex = detial.choose.indexOf('/');
					if(kIndex>-1){
					    console.log('进来了')
                        function replacepos(text,start,stop,replacetext) {
					        if(start=='go'){
                                mystr = text.substring(0, stop - 1) + replacetext ;
							}else{
                                mystr =  replacetext+ text.substring(stop + 1);
							}
                            return mystr;
                        }
                        if(index>kIndex){
					        console.log('有'+detial.choose+'后面'+detial.data.spec[i].name+":"+v);
                            detial.choose = replacepos(detial.choose,'go',eval(kIndex+1),'/'+detial.data.spec[i].name+":"+v)
						}else{
                            detial.choose = replacepos(detial.choose,'',kIndex,detial.data.spec[i].name+":"+v+'/')
						}
					}else{
                        detial.choose = detial.data.spec[i].name+":"+v;
					}
				}else{
		            if(!detial.choose){
                        detial.choose = detial.data.spec[i].name+":"+v;
					}else{
                        detial.choose += '/'+detial.data.spec[i].name+":"+v;
					}
				}*/


				detial.type[i] = (detial.data.spec[i].name+":"+v);
                detial.choose = detial.type.join(' ');
				console.log(v+'  '+i)
			},
		    show: function(val){
                if(!detial.data.spec){
                    console.log('进来啦')
                    if(val){
                        detial.buy();
                    }else{
                        detial.addToCart();
                    }
                    return
                }
		        if(val){
                    detial.typeChoose ='true';
				}else{
                    detial.typeChoose ='false';
				}
		    	$( ".count" ).animate( {'bottom':0,'opacity':1},100 );
		    	$( ".cover" ).css( 'display', 'block' );
		    },
		    hide: function(){
		        if(detial.data.spec){
                    for(var i=0;i<detial.data.spec.length;i++){
                        for(var a=0;a<detial.data.spec[i].list.length;a++){
                            $('.s'+i+a).removeClass('focus');
                        }
                    }
				}
                detial.choose ='';
                detial.type =[];
		    	$( ".count" ).animate( {'bottom':'-283px','opacity':0},100 );
		    	$( ".cover" ).css( 'display', 'none' );
		    },
		    buy: function(){
				if(detial.is_vip == 1){
					if(detial.vip_level == 0){
						$.toast( "需要先购买报单产品成为VIP会员", 2000, "warning" );
						return;
					}
				}
				if(detial.data.spec){
                    for(var i = 0;i<detial.data.spec.length;i++){
                        if(!detial.type[i]){
                            $.toast( "请选择规格", 2000, "warning" );
                            return;
                        }
                    }
                }
                if(detial.data.spec){
				    have = "&value="+detial.choose;
                }else{
                    have = '';
                }
		    	window.location.href = "/H5/cart?id="+this.param+"&count="+this.count+have;
		    },
		    js: function( e, a ){
		        if($(e.target).val()=="+"){
		            this.count ++;
		        }
		        if( $(e.target).val()=="-" ){
		            this.count --; 
		        }
		        if(detial.vip_level>0){
                    if(this.count>detial.data.sum_2){
                        detial.price = detial.data.price_3;
                        return;
                    }
                    if(this.count>detial.data.sum_1){
                        detial.price = detial.data.price_2;
                        return;
                    }
                    if(this.count<=detial.data.sum_1){
                        detial.price = detial.data.price_1;
                        return;
                    }
                }

		    },
		    zs: function( e, a ){
		        this.count = $( e.target ).val().replace(/\D/g,"");
		        if( this.count < 1 ){
		            this.count = 1;
		        }
                if(detial.vip_level>0){
                    if(this.count>detial.data.sum_2){
                        detial.price = detial.data.price_3;
                        return;
                    }
                    if(this.count>detial.data.sum_1){
                        detial.price = detial.data.price_2;
                        return;
                    }
                    if(this.count<=detial.data.sum_1){
                        detial.price = detial.data.price_1;
                        return;
                    }
                }
		    },
		    addToCart: function(){
				if(detial.is_vip == 1){
					if(detial.vip_level == 0){
						$.toast( "需要先购买报单产品成为VIP会员", 2000, "warning" );
						return;
					}
				}
		    	if( Mall.LOCK ){
		    		return
		    	}
		    	Mall.LOCK = true;
		    	Mall.request( "/api/ShopcartAdd", {goods_id: detial.param,spec_value:detial.choose} )
		    		.always( function( data ){
		    			if( data.error_code == 0 ){
		    				$.toast( "添加购物车成功", 1000, "success" );
		    				detial.hide();
		    			}
		    			Mall.LOCK = false;
		    		} )
		    }
		    
		})
		detial.getDetail();
		avalon.scan( document.body );
    </script>
</body>
</html>
